<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments::head(~{::title})">
    <title>首页</title>
</head>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
<body>
<!--导航 -->
<nav th:replace="_fragments::menu(1)">
</nav>
<!-- 中间内容 -->
<div class="mine-container mine-padded-tb-large">
    <div class="ui container">
        <div class="ui stackable grid">
            <!-- 左边博客列表 -->
            <div class="eleven wide column">
                <!-- header -->
                <div class="ui top attached segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <h3 class="ui teal header">笔记</h3>
                        </div>
                        <div class="right aligned column">
                            共<h2 class="ui orange header mine-inline-block" th:text="${page.total}">10</h2>篇笔记
                        </div>
                    </div>
                </div>

                <!--content-->
                <div class="ui attached segment">

                    <div class="ui padded vertical segment" th:each="blog:${page.content}">
                        <div class="ui middle aligned mobile reversed stackable grid">
                            <div class="eleven wide column">
                                <h3 class="ui header"><a href="#" th:href="@{/blog/detail(id=${blog.id})}"
                                                         class="mine-black" th:text="${blog.title}"> 什么事情是你当了老板才知道的？</a>
                                </h3>
                                <p th:text="|${blog.desc}......|">
                                    当了老板之后，我发现，技术人员，包括曾经的我在内，经常会犯的三个错误，而且是致命的三个错误，用小时候学的几个成语来概括，分别是
                                    瞎子摸象，刻舟求剑，以及叶公好龙
                                </p>

                                <div class="ui stackable grid">
                                    <div class="eleven wide column">
                                        <div class="ui horizontal link list">
                                            <div class="item">
                                                <img th:src="@{${blog.avatar}}"
                                                     src="https://picsum.photos/id/1056/3988/2720" alt=""
                                                     class="ui avatar image">
                                                <div class="content"><a href="#" class="header"
                                                                        th:text="${blog.username}">李晓坤</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i><span
                                                    th:text="${#dates.format(blog.createTime,'yyyy-MM-dd')}">2020-06-09</span>
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i><span th:text="${blog.viewCount}">1000000</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank"
                                           class="ui teal label mine-padded-tiny mine-text-thin"
                                           th:text="${blog.typeName}">认知升级</a>
                                    </div>
                                </div>
                            </div>

                            <div class="five wide column">
                                <a href="#" target="_blank">
                                    <img th:src="@{${blog.firstPicInfo}}" src="https://picsum.photos/id/1056/3988/2720"
                                         alt="" class="ui rounded image">
                                </a>
                            </div>
                        </div>
                    </div>


                </div>

                <!--footer-->
                <div class="ui bottom attached segment" th:if="${page.total}>0">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <a th:href="@{/(number=${page.number}-1)}" class="item"
                               th:classappend="!${page.pre} ? mine-href-hide">上一页</a>
                        </div>
                        <div class="right aligned column">
                            <a th:href="@{/(number=${page.number}+1)}" class="item"
                               th:classappend="!${page.next} ? mine-href-hide">下一页</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边top -->
            <div class="five wide column">
                <!-- 分类 -->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="right aligned column">
                                <a href="#" th:href="@{/types/}">more<i class="angle double right icon"></i> </a>
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <div class="ui fluid vertical menu">

                            <a href="#" th:href="@{/types/(typeId=${type.id})}" class="item" th:each="type : ${types}">
                                <span th:text="${type.name}!=null? ${type.name} : ''">学习log</span>
                                <div class="ui teal basic left pointing label" th:text="${type.count}">10</div>
                            </a>

                        </div>
                    </div>
                </div>
                <!-- 标签 -->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="right aligned column">
                                <a href="#" th:href="@{/tags/}">more <i class="angle double right icon"></i> </a>
                            </div>
                        </div>
                    </div>
                    <div class="ui teal segment">
                        <a th:each="tag : ${tags}" href="#" th:href="@{/tags/(tagId=${tag.id})}"
                           class="ui teal basic left pointing label mine-margin-tb-tiny">
                            <span th:text="${tag.name}">方法论</span>
                            <div class="detail" th:text="${tag.count}">6</div>
                        </a>
                    </div>
                </div>
                <!-- 最新推荐 -->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <i class="bookmark icon"></i>最新推荐
                    </div>
                    <div class="ui segment" th:each="blog : ${recommends}">
                        <a href="#" th:href="@{/blog/detail(id=${blog.id})}" class="mine-black" th:text="${blog.title}">用户故事</a>
                    </div>
                </div>
                <!-- 二维码 -->
                <h4 class="ui horizontal divider header">扫码关注我</h4>
                <div class="ui centered card inverted" style="width:10em">
                    <img src="../static/image/gzh.jpg" th:src="@{/image/gzh.jpg}" alt="" class="ui rounded  image">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<footer th:replace="_fragments::footer">
</footer>
</body>
</html>